#control{position: absolute;top:800px;}
    #control input[type="checkbox"]{width:20px;height:20px;}
    #control input[type="range"]{
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: #333;
    border: 2px inset;
    cursor: auto;
    height:15px;
}

#cube_view{
	position: relative;
	height: 800px;
	text-align: center;
}

/* Inizializzazione delle WebKit con la posizione iniziale per il Plug nel testo */
#cubo-container{
    position:absolute;
	left: 33%;
	top: 18%
}

}
#info_box{
    width:500px;
    position:relative;
    top:50px;
	
}
#info_box > span{
    padding:10px;
    border:1px solid black;
}


/* Inizializzazione della prospettiva nativa senza effetti e del dimensionamento dello zoom iniziale */
#cubo-viewport{
    -webkit-perspective: 800px;
    -moz-perspective: 800px;

    -webkit-perspective-origin: 50% 200px;
    -moz-perspective-origin: 50% 200px;
}

/* Definizioni generali del cubo */
#cubo{
    opacity: 1;   
	padding-top: 100px;
    height: 400px;
    width: 400px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}

/* Definizione della struttura della faccetta, ovvero il tassello */
/* Vecchia definizione separando tutto
#cubo .faccetta{
    position:absolute;
    margin: 1px;
    border: 3px solid gray;
    width:  90px;
    height: 90px;
    z-index: -1;
    text-align: center;
    font-size:30px;    
}
*/
#cubo .faccetta{
    position:absolute;
    margin: 0px;
    border: 1px solid gray;
    width:  100px;
    height: 100px;
    z-index: -1;
    text-align: center;
	background: rgba(255,255,255,0.1);
	box-shadow: inset 0 0 15px rgba(125,125,125,0.8);
	font-size: 15px;
	text-align: center;
	line-height: 200px;
	color: #2c3e50;
}


#cubo .faccetta > div{
    line-height: 100px;
    border-radius: 8px;
}

/* Se la descrizione all'interno del cubo � pi� grande del div stesso, modifico lo stile della scritta */
#cubo .faccetta > div span{
    opacity:0.6;
    font-size:14px;
}

/* Per la creazione delle faccette ho scelto di creare una sola facciata e poi tutte le altre vengono create a 
partire da questa. Nello specifico creo le nove faccette nel piano (facciata 2) ed ottengo le altre quattro laterali per costruzione. Inclinando di 90� ottengo le quattro in questione, mentre per la sesta (opposta) devo ruotare di 180�.
Questo � stato possibile perch� ho creato le faccette esattamente alla distanza centrata dal punto principale di creazione, facendo capitare la faccetta centrale esattamente al centro della faccetta centrale � possibile
ottenere questo effetto. */

/* FACCIATA 1 */
.f_1_11 {
    -webkit-transform:rotateX(90deg) translate3d(50px,-100px,0);
    -moz-transform:rotateX(90deg) translate3d(50px,-100px,0);
}
.f_1_21 {
    -webkit-transform:rotateX(90deg) translate3d(50px,0,0);
    -moz-transform:rotateX(90deg) translate3d(50px,0,0);
}
.f_1_31 {
    -webkit-transform:rotateX(90deg) translate3d(50px,100px,0px);
    -moz-transform:rotateX(90deg) translate3d(50px,100px,0px);
}
.f_1_12 {
    -webkit-transform:rotateX(90deg) translate3d(150px,-100px,0);
    -moz-transform:rotateX(90deg) translate3d(150px,-100px,0);
}
.f_1_22 {
    -webkit-transform:rotateX(90deg) translate3d(150px,0,0);
    -moz-transform:rotateX(90deg) translate3d(150px,0,0);
}
.f_1_32 {
    -webkit-transform:rotateX(90deg) translate3d(150px,100px,0);
    -moz-transform:rotateX(90deg) translate3d(150px,100px,0);
}
.f_1_13 {
    -webkit-transform:rotateX(90deg) translate3d(250px,-100px,0);
    -moz-transform:rotateX(90deg) translate3d(250px,-100px,0);
}
.f_1_23 {
    -webkit-transform:rotateX(90deg) translate3d(250px,0,0);
    -moz-transform:rotateX(90deg) translate3d(250px,0,0);
}
.f_1_33 {
    -webkit-transform:rotateX(90deg) translate3d(250px,100px,0);
    -moz-transform:rotateX(90deg) translate3d(250px,100px,0);
}

/* FACCIATA 2 */
.f_2_11 {
    -webkit-transform:translate3d(50px,50px,150px);
    -moz-transform:translate3d(50px,50px,150px);
}
.f_2_21 {
    -webkit-transform:translate3d(50px,150px,150px);
    -moz-transform:translate3d(50px,150px,150px);

}
.f_2_31 {
    -webkit-transform:translate3d(50px,250px,150px);
    -moz-transform:translate3d(50px,250px,150px);
}
.f_2_12 {
    -webkit-transform:translate3d(150px,50px,150px);
    -moz-transform:translate3d(150px,50px,150px);
}
.f_2_22 {
    -webkit-transform:translate3d(150px,150px,150px);
    -moz-transform:translate3d(150px,150px,150px);
}
.f_2_32 {
    -webkit-transform:translate3d(150px,250px,150px);
    -moz-transform:translate3d(150px,250px,150px);
}
.f_2_13 {
    -webkit-transform:translate3d(250px,50px,150px);
    -moz-transform:translate3d(250px,50px,150px);
}
.f_2_23 {
    -webkit-transform:translate3d(250px,150px,150px);
    -moz-transform:translate3d(250px,150px,150px);
}
.f_2_33 {
    -webkit-transform:translate3d(250px,250px,150px);
    -moz-transform:translate3d(250px,250px,150px);
}

/* FACCIATA 3 */
.f_3_11 {
    -webkit-transform:rotateX(-90deg) translate3d(50px,-100px,300px);
    -moz-transform:rotateX(-90deg) translate3d(50px,-100px,300px);
}
.f_3_21 {
    -webkit-transform:rotateX(-90deg) translate3d(50px,0,300px);
    -moz-transform:rotateX(-90deg) translate3d(50px,0,300px);
}
.f_3_31 {
    -webkit-transform:rotateX(-90deg) translate3d(50px,100px,300px);
    -moz-transform:rotateX(-90deg) translate3d(50px,100px,300px);
}
.f_3_12 {
    -webkit-transform:rotateX(-90deg) translate3d(150px,-100px,300px);
    -moz-transform:rotateX(-90deg) translate3d(150px,-100px,300px);
}
.f_3_22 {
    -webkit-transform:rotateX(-90deg) translate3d(150px,0px,300px);
    -moz-transform:rotateX(-90deg) translate3d(150px,0px,300px);
}
.f_3_32 {
    -webkit-transform:rotateX(-90deg) translate3d(150px,100px,300px);
    -moz-transform:rotateX(-90deg) translate3d(150px,100px,300px);
}
.f_3_13 {
    -webkit-transform:rotateX(-90deg) translate3d(250px,-100px,300px);
    -moz-transform:rotateX(-90deg) translate3d(250px,-100px,300px);
}
.f_3_23 {
    -webkit-transform:rotateX(-90deg) translate3d(250px,0px,300px);
    -moz-transform:rotateX(-90deg) translate3d(250px,0px,300px);
}
.f_3_33 {
    -webkit-transform:rotateX(-90deg) translate3d(250px,100px,300px);
    -moz-transform:rotateX(-90deg) translate3d(250px,100px,300px);
}

/* FACCIATA 4 */
.f_4_11 {
    -webkit-transform:rotateX(-180deg) translate3d(50px,-250px,150px);
    -moz-transform:rotateX(-180deg) translate3d(50px,-250px,150px);
}
.f_4_21 {
    -webkit-transform:rotateX(-180deg) translate3d(50px,-150px,150px);
    -moz-transform:rotateX(-180deg) translate3d(50px,-150px,150px);
}
.f_4_31 {
    -webkit-transform:rotateX(-180deg) translate3d(50px,-50px,150px);
    -moz-transform:rotateX(-180deg) translate3d(50px,-50px,150px);
}
.f_4_12 {
    -webkit-transform:rotateX(-180deg) translate3d(150px,-250px,150px);
    -moz-transform:rotateX(-180deg) translate3d(150px,-250px,150px);
}
.f_4_22 {
    -webkit-transform:rotateX(-180deg) translate3d(150px,-150px,150px);
    -moz-transform:rotateX(-180deg) translate3d(150px,-150px,150px);
}
.f_4_32 {
    -webkit-transform:rotateX(-180deg) translate3d(150px,-50px,150px);
    -moz-transform:rotateX(-180deg) translate3d(150px,-50px,150px);
}
.f_4_13 {
    -webkit-transform:rotateX(-180deg) translate3d(250px,-250px,150px);
    -moz-transform:rotateX(-180deg) translate3d(250px,-250px,150px);
}
.f_4_23 {
    -webkit-transform:rotateX(-180deg) translate3d(250px,-150px,150px);
    -moz-transform:rotateX(-180deg) translate3d(250px,-150px,150px)

}
.f_4_33 {
    -webkit-transform:rotateX(-180deg) translate3d(250px,-50px,150px);
    -moz-transform:rotateX(-180deg) translate3d(250px,-50px,150px);
}

/* FACCIATA 5 */
.f_5_11 {
    -webkit-transform:rotateY(-90deg) translate3d(-100px,50px,0px);
    -moz-transform:rotateY(-90deg) translate3d(-100px,50px,0px);
}
.f_5_21 {
    -webkit-transform:rotateY(-90deg) translate3d(-100px,150px,0px);
    -moz-transform:rotateY(-90deg) translate3d(-100px,150px,0px);
}
.f_5_31 {
    -webkit-transform:rotateY(-90deg) translate3d(-100px,250px,0px);
    -moz-transform:rotateY(-90deg) translate3d(-100px,250px,0px);
}
.f_5_12 {
    -webkit-transform:rotateY(-90deg) translate3d(0px,50px,0px);
    -moz-transform:rotateY(-90deg) translate3d(0px,50px,0px);
}
.f_5_22 {
    -webkit-transform:rotateY(-90deg) translate3d(0px,150px,0px);
    -moz-transform:rotateY(-90deg) translate3d(0px,150px,0px);
}
.f_5_32 {
    -webkit-transform:rotateY(-90deg) translate3d(0px,250px,0px);
    -moz-transform:rotateY(-90deg) translate3d(0px,250px,0px);
}
.f_5_13 {
    -webkit-transform:rotateY(-90deg) translate3d(100px,50px,0px);
    -moz-transform:rotateY(-90deg) translate3d(100px,50px,0px);
}
.f_5_23 {
    -webkit-transform:rotateY(-90deg) translate3d(100px,150px,0px);
    -moz-transform:rotateY(-90deg) translate3d(100px,150px,0px);
}
.f_5_33 {
    -webkit-transform:rotateY(-90deg) translate3d(100px,250px,0px);
    -moz-transform:rotateY(-90deg) translate3d(100px,250px,0px);
}

/* FACCIATA 6 */
.f_6_11 {
    -webkit-transform:rotateY(90deg) translate3d(-100px,50px,300px);
    -moz-transform:rotateY(90deg) translate3d(-100px,50px,300px);
}
.f_6_21 {
    -webkit-transform:rotateY(90deg) translate3d(-100px,150px,300px);
    -moz-transform:rotateY(90deg) translate3d(-100px,150px,300px);
}
.f_6_31 {
    -webkit-transform:rotateY(90deg) translate3d(-100px,250px,300px);
    -moz-transform:rotateY(90deg) translate3d(-100px,250px,300px);
}
.f_6_12 {
    -webkit-transform:rotateY(90deg) translate3d(0px,50px,300px);
    -moz-transform:rotateY(90deg) translate3d(0px,50px,300px);;
}
.f_6_22 {
    -webkit-transform:rotateY(90deg) translate3d(0px,150px,300px);
    -moz-transform:rotateY(90deg) translate3d(0px,150px,300px);
}
.f_6_32 {
    -webkit-transform:rotateY(90deg) translate3d(0px,250px,300px);
    -moz-transform:rotateY(90deg) translate3d(0px,250px,300px);
}
.f_6_13 {
    -webkit-transform:rotateY(90deg) translate3d(100px,50px,300px);
    -moz-transform:rotateY(90deg) translate3d(100px,50px,300px);
}
.f_6_23 {
    -webkit-transform:rotateY(90deg) translate3d(100px,150px,300px);
    -moz-transform:rotateY(90deg) translate3d(100px,150px,300px);
}
.f_6_33 {
    -webkit-transform:rotateY(90deg) translate3d(100px,250px,300px);
    -moz-transform:rotateY(90deg) translate3d(100px,250px,300px);
}

#cubo .faccetta:hover{
    background:blue;
}
